import React from 'react';
import { useTheme } from '../contexts/ThemeContext';
import { generateThemeColorScheme } from '../utils/colorGenerator';

const ColorPreview: React.FC = () => {
  const { theme } = useTheme();
  const colorScheme = generateThemeColorScheme(theme.colors.primary[500]);

  return (
    <div className="p-6 space-y-6">
      <h2 className="text-2xl font-bold text-gray-800">主题色衍生颜色预览</h2>
      
      {/* 原始主题色 */}
      <div className="space-y-2">
        <h3 className="text-lg font-semibold">原始主题色</h3>
        <div className="flex items-center space-x-4">
          <div
            className="w-16 h-16 rounded-lg shadow-md"
            style={{ backgroundColor: colorScheme.primary }}
          />
          <span className="font-mono text-sm">{colorScheme.primary}</span>
        </div>
      </div>

      {/* 衍生颜色 */}
      <div className="space-y-2">
        <h3 className="text-lg font-semibold">衍生颜色 (类似 #FFEEA9, #FEBA9C, #FD9849)</h3>
        <div className="grid grid-cols-3 gap-4">
          <div className="text-center">
            <div
              className="w-20 h-20 rounded-lg shadow-md mx-auto mb-2"
              style={{ backgroundColor: colorScheme.derived.light }}
            />
            <p className="text-sm font-medium">浅色</p>
            <p className="font-mono text-xs">{colorScheme.derived.light}</p>
          </div>
          <div className="text-center">
            <div
              className="w-20 h-20 rounded-lg shadow-md mx-auto mb-2"
              style={{ backgroundColor: colorScheme.derived.medium }}
            />
            <p className="text-sm font-medium">中色</p>
            <p className="font-mono text-xs">{colorScheme.derived.medium}</p>
          </div>
          <div className="text-center">
            <div
              className="w-20 h-20 rounded-lg shadow-md mx-auto mb-2"
              style={{ backgroundColor: colorScheme.derived.accent }}
            />
            <p className="text-sm font-medium">强调色</p>
            <p className="font-mono text-xs">{colorScheme.derived.accent}</p>
          </div>
        </div>
      </div>

      {/* 简化说明 */}
      <div className="space-y-2">
        <h3 className="text-lg font-semibold">Layout背景说明</h3>
        <div className="p-4 bg-gray-50 rounded-lg">
          <p className="text-sm text-gray-600">
            当前Layout使用简洁的白色背景，去除了所有装饰性投影和曲线，
            提供更清爽的视觉体验。主题色主要用于左侧菜单和UI组件。
          </p>
        </div>
      </div>

      {/* 透明度变体 */}
      <div className="space-y-2">
        <h3 className="text-lg font-semibold">透明度变体</h3>
        <div className="grid grid-cols-4 gap-2">
          {[0.1, 0.3, 0.5, 0.8].map(opacity => (
            <div key={opacity} className="text-center">
              <div
                className="w-16 h-16 rounded-lg shadow-md mx-auto mb-1"
                style={{ backgroundColor: colorScheme.withOpacity.primary(opacity) }}
              />
              <p className="text-xs">{Math.round(opacity * 100)}%</p>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default ColorPreview;